<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view class="content">
			<view class="title_a">
				收件人
			</view>
			<input @click="selectedName=true" @blur="selectedName=false"
				:class=" selectedName==true ? 'selected' : 'input' " type="text" class="input"
				v-model="information.receiverName" placeholder="请填写收件人姓名">
			<view class="title_a">
				联系方式
			</view>
			<input @click="selectedPhone=true" @blur="selectedPhone=false"
				:class=" selectedPhone==true ? 'selected' : 'input' " type="text" class="input"
				v-model="information.receiverPhone" placeholder="请填写收件人联系方式">
			<view class="title_a">
				地址
			</view>
			<view @click="hideKeyBorder()">
				<input @click="selectedAddree=true" @blur="selectedAddree=false"
					:class=" selectedAddree==true ? 'selected' : 'input' " @tap="show = true" class="input"
					v-model="addres" placeholder="省/市/区县"></input>
				<u-picker @cancel="cancel" :show="show" ref="uPicker" :columns="columns" keyName="name"
					@confirm="confirm" @change="changeHandler" mode="region" :area-code="areaCode"></u-picker>
			</view>
			<view class="title_a">
				详细地址
			</view>
			<input @click="selected=true" @blur="selected=false" :class=" selected==true ? 'selected' : 'input' "
				type="text" class="input" v-model="information.receiverAddress" placeholder="请填写详细地址">
			<view style="margin-top: 30rpx;" class="flex align-center">
				<checkbox-group @change="checkedChange()">
					<checkbox :checked="checked" style="transform:scale(0.7);" />
				</checkbox-group>
				<text style="font-size: 28rpx;color: rgba(30,30,30,0.3);">默认地址</text>
			</view>
		</view>
		<view class="settlement" @click="getAddress">
			<view class="settled">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import address from '../../../components/address.json'
	export default {
		data() {
			return {
				selected: false,
				selecteds: false,
				selectedName: false,
				selectedPhone: false,
				selectedAddree: false,
				checked: false,
				config: {
					title: '',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					rightSlot: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				show: false,
				columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
				columnData: [], //市数据
				columnDatas: [], //区地址
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				addres: '',
				information: {
					receiverName: '',
					receiverPhone: '',
					// 省份
					receiverProvince: '',
					// 城市
					receiverCity: '',
					// 城县
					receiverDistrict: '',
					receiverAddress: '',
					defaultAddr: 2
				},
				id: '',
				areaCode: ''
			}
		},
		onLoad(e) {
			if (e.data == {}) {
				this.config.title = '添加地址'
			} else {
				this.config.title = '编辑地址'
				let data = JSON.parse(e.data)
				this.id = data.id
				this.information = data
				this.addres = data.receiverProvince + '-' + data.receiverCity + '-' + data.receiverDistrict
				this.information.defaultAddr = data.defaultAddr
				if (data.defaultAddr == 1) {
					this.checked = true
				} else {
					this.checked = false
				}
			}
			// if (this.id == undefined) {
			// 	this.config.title = '添加地址'
			// } else {
			// 	this.config.title = '编辑地址'
			// }
			this.initDataPicker() //初始化省份列表
		},
		methods: {
			// 添加、修改地址
			getAddress() {
				if (this.id == "") {
					this.$api.addAddress(this.information).then((res) => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: `添加成功`,
								icon: "block",
							})
							this.$tools.goPageNoAuth('./addressManagement')
						}
					})
				} else {
					this.$api.editAddress(this.information).then((res) => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: `修改成功`,
								icon: "block",
							})
							this.$tools.goPageNoAuth('./addressManagement')
						}
					})
				}
			},
			checkedChange(e) {
				this.checked = !this.checked
				if (this.checked == true) {
					this.information.defaultAddr = 1
				} else {
					this.information.defaultAddr = 2
				}
			},
			initDataPicker() {
				//此处的province主要用作数据的初始化，即刚打开就需要进行展示的数据，这个跟第一条省份数据相关，我的第一条是北京市，所以需要columns中的三维数组，第一维度是省份数据数组，第二维度是市数据数组，第三维度是区数据数组
				let province = []; //初始数据需要展示的省份
				let province1 = [{
					name: '市辖区',
					code: '1101'
				}]; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
				let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
				address.map(item => {
					province.push(item);
				});

				address[0].children[0].children.map(item => {
					province2.push(item);
				});

				//省数据 因为要做数据初始化，所以是三维数组 
				// 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
				this.columns.push(province);
				this.columns.push(province1);
				this.columns.push(province2);

				// 市数据数组，筛选address.json文件，将全国所有省下面的市数据放入数组
				// 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据

				address.map(item => {
					let city = [];
					item.children.map(item1 => {
						city.push(item1);
					});
					this.columnData.push(city);
				});

				//区数据数组
				//数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,]   ,   [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,]   ]

				let area = [];
				address.map((item, index) => {
					let area1 = []; //省下面所有市的初始化
					item.children.map(item1 => {
						area = []; //市下面的区初始化
						item1.children.map(item2 => {
							area.push(item2);
						});
						area1.push(area); // 每循环一个市，添加该市下面的所有区
					});
					this.columnDatas.push(area1); // 每循环一个省，添加该省下面的所有市
				});
			},
			changeHandler(e) { //城市选择时触发
				const {
					columnIndex, //当前选择的列，省 / 市 / 区
					value, // 当前选择的数组内容
					values, // values为当前变化列的数组内容
					index, // 当前列的下标值
					indexs, // 当前选择 省 市 区的下表值
					picker = this.$refs.uPicker
				} = e;

				// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
				if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[
						index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据

					picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
				}
				if (columnIndex === 1) {
					// 当第二列发生变化 变化对应的第三列 
					picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
				}
			},
			confirm(e) { //点击确定按钮
				let arr = e.toString()
				let city = arr.split(",")
				this.addres = e
				// this.addres = city[0] + '-' + city[1] +
				// 	'-' + city[2]
				this.information.receiverProvince = city[0]
				this.information.receiverCity = city[1]
				this.information.receiverDistrict = city[2]
				this.show = false;
				this.areaCode = e.indexs
			},
			cancel() { //点击取消按钮
				this.show = false;
			},
			hideKeyBorder(e) {
				uni.hideKeyboard();
			},
		},
	}
</script>

<style scoped>
	input:focus {
		background: #FFFFFF;
		border: 1px solid #2DA7E0;
		/* 解决input按钮自动填充后 浏览器渲染的默认背景问题 */
		box-shadow: inset 0 0 0 1000px #FFFFFF !important;
	}

	.settlement {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		width: 100%;
		margin: auto 0;
		background-color: #FFFFFF
	}

	.settled {
		width: 554rpx;
		height: 86rpx;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 86rpx;
		text-align: center;
		margin: auto;
	}

	.content {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.input {
		width: 690rpx;
		height: 112rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(73, 45, 34, 0.1);
		padding: 20rpx;
	}

	.selected,
	.selecteds {
		border: 5rpx solid #492D22;
	}

	.title_a {
		margin: 30rpx 0 10rpx;
		font-size: 32rpx;
	}
</style>
